<template>
  <div id="app">
    <div id="testChart" ref="testChart"></div>
  </div>
</template>

<script>
export default {
  name: "EmpBasic",
  data() {
    return {
      xData: [],
      yData: []
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      var echarts = require('echarts')
      var testChart = echarts.init(this.$refs.testChart);

      testChart.setOption({
        /*title: {
            text: "ECharts 入门示例"
        },*/
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: []
          }
        ]
      });
      // chart自适应
      this.$echartsResize(testChart);

      // 重绘chart
      for (let i = 0; i < 10; i++) {
        setTimeout(() => {
          this.yData.push(Math.floor(Math.random()*10)+1)
          this.xData.push("test"+i)
          testChart.setOption({
            xAxis: {
              data: this.xData
            },
            series: [
              {
                data: this.yData
              }
            ]
          });
        }, i*2000)
      }
    }
  }
};
</script>

<style scoped>
#testChart {
  width: 100%;
  height: 600px;
}
</style>